<template>
	<view>
		<!-- 搜索框 -->
		<view class="" >
		    <view class="weui-search-bar__box weui-search-bar__form"style="width: 90%;" @click="navigateTosearch(search)">
				<icon class="weui-icon-search_in-box1 " type="search" size="14"></icon>
		        <input type="text" class="weui-search-bar__input " style="left: 2rpx;" placeholder="搜索用户" >	
		    </view>
			<view  >
				<text class="weui-icon-search_in-box iconfont icon-sousuo" size="14"  ></text>
			</view>
		</view>
		<!-- tab -->
		<view class="flex align-cente " style="height: 100rpx;">
			<view class="flex-1 font-md flex align-center justify-center "  v-for="(item,index) in tabBars" :key="index" :class="index===tabIndex ? 'font-lg font-weight-bold text-main':'font-md'" @click="changeTab(index)">
				{{item.name}}
				<text v-if="item.num>0" class="m-2">{{item.num}}</text>
			</view>
		</view>
		<!-- 列表 -->
		<swiper :duration="150" :current="tabIndex" @change="onChangeTab" :style="'height:'+scrollH+'px;'">
			<swiper-item v-for="(item,index) in newsList" :key="index">
				<scroll-view scroll-y="true" :style="'height:'+scrollH+'px;'" @scrolltolower="loadmore(index)">
					<template v-if="newsList.length >0">
					<!-- 列表 -->
						
						<!-- 列表样式 -->	
						<user-list :item="item" :index="index"></user-list>
						
						
						<!-- 上拉加载 -->
						
						<load-more v-if="item.length>10" :loadmore="item.loadmore"></load-more>
					</template>
					<!-- 无数据 -->
					<template v-else>
						<no-thing></no-thing> 
					</template>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	const demo=[{
		avatar:"/static/tabber/default.jpg",
		username:"昵称",
		sex:1,
		age:24,
		isFollow:true
	},
	{
		avatar:"/static/tabber/default.jpg",
		username:"昵称",
		sex:2,
		age:24,
		isFollow:false
	}]
	import loadMore from "@/components/common/load-more.vue";
	import noThing from "@/components/common/no-thing.vue";
	import userList from "@/components/user-list/user-list.vue";
	
	export default 
	{
		components:{
			loadMore,
			noThing,
			userList
		},
		data(){
			return{
				friend:[],
				scrollH:600,
				tabIndex:0,
				tabBars:[
				{
					name:"关注",
					num:1
				},
				{
					name:"粉丝",
					num:30
				}],
				newsList:[]
			}
		},
		onShow(){
			this.getUser()
			//根据选项生成列表
			
		},
		onLoad()
		{
			uni.getSystemInfo({
								 success:res=>{
									 this.scrollH=res.windowHeight-uni.upx2px(100)
								 }
			})
			// this.getData()
		},
		methods:{
			//获取数据
			async getUser() {
							var arr=[]
							const res = await uniCloud.callFunction({
								name: "friend",
								data: {
									action: 'getOne',
									id:this.$store.state.loginsStatus
								}
							})
							this.friend=res.result.data[0].friend
							console.log(this.friend.length)
					for(let j=0;j<this.friend.length;j++){
					console.log(111111112345)
					console.log(this.friend[j])
					const res = await uniCloud.callFunction({
						name: "userinformation",
						data: {
							action: 'getOne',
							id:this.friend[j]
						}
					})
					this.demo=res.result.data[0]
					console.log(this.demo)
					arr.push(this.demo)
				}
				this.newsList=arr
				console.log(this.newsList)
				},
			//获取数据
			//  getData(){
			// 	 console.log(this.friend.length)
				
			// 	console.log(12222222222222222222222222222222222222)
			// 	var arr=[]
			// 	for(let i=0;i<this.tabBars.length;i++){
			// 		//生成列表模板
			// 		let obj={
			// 			//1.上拉加载更多 2.加载中... 3.没有更多了...
			// 			loadmore:"上拉加载更多",
			// 			list:[]
			// 		}
			// 		if(i<3){
			// 			obj.list=demo
			// 		}
			// 		arr.push(obj)
			// 	}
			// 	this.newsList=arr
			// 	console.log(this.newsList)
			// },
			navigateTosearch(search){
				uni.navigateTo({
					url:'../search/search?type=user',
				})
			},
			//tab切换
			changeTab(index){
				this.tabIndex=index
			},
			//监听滑动
			onChangeTab(e){
				this.changeTab(e.detail.current)
			},
			//上拉加载更多
			loadmore(index){
							  
							  let item=this.newsList[index]
							  //判断是否处于可加载状态（上拉加载更多）
							  if(item.loadmore!=='上拉加载更多')return;
							  //修改当前列表的加载状态
							  item.loadmore="加载中..."
							  
							  //模拟数字请求
							  setTimeout(()=>{
								  //加载数据
								  item.list=[...item.list,...item.list]
								  //恢复加载状态
								   item.loadmore="上拉加载更多"
							  },4000)
			}
		}
	}
</script>

<style>
.weui-search-bar {
	  position: relative;
	  padding: 8px 10px;
	  display: -webkit-box;
	  display: -webkit-flex;
	  display: flex;
	  box-sizing: border-box;
	  background-color: #EFEFF4;
	  border-top: 1rpx solid #D7D6DC;
	  border-bottom: 1rpx solid #D7D6DC;
	}
	.weui-icon-search_in-box {
	  position: absolute;
	  right: 11px;
	  top: 7px;
	}
	.weui-search-bar__form {
	  position: relative;
	  -webkit-box-flex: 1;
	  -webkit-flex: auto;
	          flex: auto;
	  border-radius: 5px;
	  background: #FFFFFF;
	  border: 1rpx solid #E6E6EA;
	}
	.weui-search-bar__box {
	  position: relative;
	  padding-left: 30px;
	  padding-right: 30px;
	  width: 100%;
	  box-sizing: border-box;
	  z-index: 1;
	}
	.weui-icon-search_in-box1{
		position: absolute;
		left: 11px;
		top: 7px;
	}
	.weui-search-bar__input {
	  height: 28px;
	  line-height: 28px;
	  font-size: 14px;
	  left: 5rpx;
	}
	.weui-search-bar__cancel-btn {
	  margin-left: 10px;
	  line-height: 28px;
	  color: #1296db;
	  white-space: nowrap;
	}
	
</style>
